<template>
  <el-button @click="saveData('action_3_main')">保存数据</el-button>
  <el-button @click="cleanPiniaCacheData('action_3_main')">清除缓存</el-button>
  <div id="action_3_main" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">
import {onMounted} from "vue";
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import config3 from "./交叉表纵向合计_横向合计.json"
import data3 from "./交叉表纵向合计_横向合计_data.json"
import { queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";

// 注意奇怪抛异常：  可能是版本的原因，如果是从官网下载的json数据，一般都是json数据集设计的，此时回显，必须把type=4====》type=1
// action_3.data.json的数据非常的特殊，B产品1/2/3/4季度有各2条数据，汇总看不出来；
const usePreStore = usePreviewStore();
const dataset = [ //  添加数据集按钮
  { //Json数据
    id: 1,
    value: "新建Json数据集"
  },
  { //http请求数据
    id: 2,
    value: "新建Http接口数据集"
  },
  { //API服务数据
    id: 3,
    value: "API服务数据集"
  },
  {
    id: 4,
    value: "外部数据集"
  }
];
const options = {
  row: 100,
  col: 25,
  width: () => document.documentElement.clientWidth,
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}
options.onUpdateDatasetList =  () => {
  return new Promise((resolve, reject) => {
    resolve([]);
  })
}

// 该方法的返回值是一个Promise
const onUpdateData = (datasets, params) => {
  console.log("..action_3_main.vue....datasets:", datasets);
  console.log("..action_3_main.vue....params:", params);
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets,params,data3));
  })
}
options.onUpdateData = onUpdateData

const loadData = () => {

  sheetDesign.loadData({config: config3, data: data3});

}

const on_dataset_edited = (dataset)=>{
  console.log("...dataset_edited...,dataset:",dataset);
}
// 绑定授权码
//XZReport.setKey(授权码)  //可以在localhost/127.0.0.1环境下使用
let sheetDesign;
onMounted(() => {
  sheetDesign = XZReportDesigner("#action_3_main", options);
  sheetDesign.loadData({config: config3, data: data3});
  // 监听 编辑数据集事件
  sheetDesign.on("dataset-edited",on_dataset_edited);
})

function saveData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  const {config, data} = sheetDesign.getData(); //报表设计器的保存事件
  usePreStore.saveReportDesignerPreviewData(reportDesignerPreviewId, config, data);
  console.log(".action_3_main.vue..sheetDesign.getData():", sheetDesign.getData());
  console.log(config)
  console.log(data);
}

function cleanPiniaCacheData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  usePreStore.cleanReportDesignerPreviewData(reportDesignerPreviewId);

}

</script>

